<template>
  <div class="page_main">
    <canvas ref="cavs" width="700" height="700"></canvas>
  </div>

</template>

<script>
import {Dom} from "fei-common";
import KeyObj from "./keyObj.js";
console.log(Dom);
export default {
  name: "canvasTest",
  data() {
    return {
      lineArr: [],
      isHand: false,
      hand: {x: 0, y: 0},
      isInCavs: false,
      isCalcRes: false,
      rightLineArr: [6, 5, 8, 9]
    };
  },
  mounted() {
    let self = this;
    let canvas = this.$refs.cavs;
    let ctx = canvas.getContext("2d");
    let paddingR = 100;
    let outR = 50;
    let innerR = 10;
    let startPos = outR + paddingR;
    let keyGap = (canvas.width >> 1) - startPos;

    let keyPool = [];
    let idStart = 1;
    for (let i = 0; i < 3; i++) {
      for (let j = 0; j < 3; j++) {
        let x = startPos + keyGap * j;
        let y = startPos + keyGap * i;
        let id = idStart++;
        let keyObj = new KeyObj(x, y, outR, innerR, id);
        keyPool.push(keyObj);
        // console.log(keyObj);
      }
    }

    this.draw(ctx, keyPool);

    // 计算点击位置
    let cavsRect = canvas.getBoundingClientRect();
    canvas.addEventListener("touchstart", e => {
      this.isInCavs = true;
    });

    $('.page_main')[0].addEventListener(
      "touchmove",
      e => {
        e.preventDefault();
        return false;
      }
    );
    canvas.addEventListener("touchend", e => {
      this.isInCavs = false;
      this.draw(ctx, keyPool);
      this.isCalcRes = true;

      this.isHand = false;

      setTimeout(() => {
        console.log(this.lineArr);
        let isRight = false;
        if (this.lineArr.length == this.rightLineArr.length) {
          isRight = this.lineArr.every((item, index) => {
            return item.id === this.rightLineArr[index];
          });
        }

        if (isRight) {
          alert("RIGHT,good guy");
        } else {
          this.lineArr.map(item => {
            item.isWrong = true;
          });
          this.draw(ctx, keyPool);
          alert("WRONG,you idiot");
        }

        setTimeout(() => {
          this.initKeyPool(ctx, keyPool);
          this.isCalcRes = false;
        }, 1000);
      }, 1000);
    });

    canvas.addEventListener("touchmove", e => {
      // console.log("moving==>", isInCavs);
      if (!this.isInCavs || this.isCalcRes) {
        return;
      }
      let touchPoint = e.touches[0];
      let cavsPos = {
        x: ((touchPoint.clientX - cavsRect.x) * canvas.width) / cavsRect.width,
        y: ((touchPoint.clientY - cavsRect.y) * canvas.width) / cavsRect.height
      };

      keyPool.map((item, index) => {
        // console.log(`${index}=>(${item.x},${item.y}),(${cavsPos.x},${cavsPos.y})`);
        // console.log((item.x - cavsPos.x) ** 2 + (item.y - cavsPos.y) ** 2);
        if ((item.x - cavsPos.x) ** 2 + (item.y - cavsPos.y) ** 2 < outR ** 2) {
          item.isActive = true;
          let repeatIndex = -1;
          let isExit = this.lineArr.some((curItem, index) => {
            if (curItem.id === item.id) {
              repeatIndex = index;
              return true;
            }
          });

          if (isExit) {
            this.lineArr.splice(repeatIndex + 1).map(item => {
              item.isActive = false;
            });
          } else {
            this.lineArr.push(item);
          }
        }
      });

      if (this.lineArr.length > 0) {
        this.isHand = true;
        this.hand = cavsPos;
      }

      this.draw(ctx, keyPool);
      e.preventDefault();
      return false;
    });
  },
  methods: {
    initKeyPool(ctx, keyPool) {
      keyPool.map(item => {
        item.isWrong = false;
        item.isActive = false;
        this.lineArr = [];
      });
      this.draw(ctx, keyPool);
    },
    draw(ctx, keyPool) {
      ctx.clearRect(0, 0, 1000, 1000);
      ctx.lineWidth = 4;
      ctx.fillStyle = "white";
      keyPool.map((keyObj, index) => {
        ctx.strokeStyle = "rgba(255,255,255,.3)";

        if (keyObj.isWrong) {
          ctx.strokeStyle = "rgba(255,0,0,1)";
        } else if (keyObj.isActive) {
          ctx.strokeStyle = "rgba(255,255,255,1)";
        }
        ctx.beginPath();
        ctx.arc(keyObj.x, keyObj.y, keyObj.outR, 0, Math.PI * 2, false);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(keyObj.x, keyObj.y, keyObj.innerR, 0, Math.PI * 2, false);
        ctx.fill();
      });

      this.lineArr.map((item, index) => {
        ctx.strokeStyle = "white";
        if (index == 0) {
          ctx.moveTo(item.x, item.y);
        } else {
          ctx.lineTo(item.x, item.y);
        }
      });

      if (this.isHand && this.isInCavs) {
        ctx.lineTo(this.hand.x, this.hand.y);
      }
      ctx.stroke();
    }
  }
};
</script>

<style lang="less" scoped>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.page_main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #345cb1;

  canvas {
    width: 7rem;
    border: 1px solid white;
    box-sizing: border-box;
  }
}
</style>
